<template>
  <view>
    <!-- 		<view class="list">
			<view class="item flex flex-j-b uni-item-line" v-for="(v,index) in list" :key="v.id"
				@tap="choose(v)">
				<view class="flex">
					<view class="title">{{v.appUserInfo.userName}}</view>
					<view v-if="index!=0">
						<u-tag text="未注册" type="warning" size="mini"
							bg-color="#fff" color="#F78E3A" border-color="#F78E3A"/>
					</view>
				</view>
				<view class="time">{{v.mobile}}</view>
			</view>
		</view> -->
    <view class="boxer">
      <view class="title">
        <text class="txt">请选择一个家庭成员与你关联</text>
      </view>
      <u-radio-group v-model="value" @change="radioGroupChange">
        <u-radio
          @change="radioChange"
          v-for="(item, index) in list"
          :key="index"
          :name="item.appUserId"
          :disabled="item.disabled"
        >
          {{ item.appUserName }}
        </u-radio>
      </u-radio-group>
      <u-alert-tips
        type="info"
        :description="description"
        class="card"
        v-show="isShow"
      ></u-alert-tips>
      <view class="title">
        <text class="txt">选择你与该家人的关系</text>
      </view>
      <view class="select">
        <input
          class="inp"
          type="text"
          @click="show2 = true"
          disabled
          v-model="yblist[selectorObjIndex2].name"
        />
        <u-picker
          v-model="show2"
          mode="selector"
          :range="yblist"
          class="selted"
          range-key="name"
          @confirm="getSelectVal2"
        ></u-picker>
      </view>
    </view>
    <view style="margin-top: 100upx">
      <button type="default" class="sbtn" @tap="sub">确认提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: "orange",
      description: "暂无查询到的家庭成员信息",
      list: [],
      selectorObj2: [
        {
          name: "爸爸",
          id: "0",
        },
        {
          name: "妈妈",
          id: "1",
        },
      ],
      show2: false,
      selectorObjIndex2: 0,
      realtion: "", //标识,
      userid: "",
      isShow: false,
    };
  },
  onShow() {
    this.getInsType();
  },
  computed: {
    yblist() {
      let list = [];
      this.selectorObj2.forEach((item) => {
        let name = item.dictLabel;
        let id = item.dictValue;
        list.push({
          name: name,
          id: id,
        });
      });
      return list;
    },
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    getSelectVal(v) {
      this.selectorObjIndex = v[0];
    },
    getInsType() {
      let self = this;
      // this.config.loading()
      this.config
        .get("/util/sysDictData/type/family_relation", {})
        .then((res) => {
          uni.hideLoading();
          //console.log(res)
          if (res.data.code === 200) {
            self.selectorObj2 = res.data.data;
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    getSelectVal2(v) {
      this.selectorObjIndex2 = v[0];
      this.realtion = this.selectorObj2[v].dictValue;
    },
    radioChange(e) {
      this.userid = e;
    },
    // 选中任一radio时，由radio-group触发
    radioGroupChange(e) {
      // //console.log(e);
    },
    // 获取家庭组列表
    getFamilyList() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config.get("/family/getFamilyGroup", {}).then((res) => {
        uni.hideLoading();
        if (res.data.code === 200) {
          //console.log(res)
          this.list = res.data.data;
          if (typeof res.data.data === "undefined") {
            this.isShow = true;
          } else {
            this.isShow = false;
          }
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    choose(v) {},
    sub() {
      if (this.userid == "") {
        uni.showToast({
          title: "关联人员为空",
          icon: "none",
        });
      } else {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        setTimeout((s) => {
          uni.hideLoading();
        }, 5000);
        this.config
          .post("/family/addFamilyGroupRelation", {
            id: this.userid,
            realtion: this.realtion || "GrandFather",
          })
          .then((res) => {
            uni.hideLoading();
            if (res.data.code === 200) {
              //console.log(res)
              uni.navigateBack({
                delta: 1,
              });
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          });
      }
    },
  },
  mounted() {
    this.getFamilyList();
  },
};
</script>

<style lang="less" scoped>
/* 	.list{
		.item{
			padding: 20upx 30upx;
			margin: 10upx 20upx;
			.title{
				font-size: 36upx;
				margin: 0 10upx 0 0;
			}
			.time{
				color: #999;
			}
		}
	} */
.boxer {
  .title {
    padding: 20upx 50upx;
    background-color: #eee;

    .txt {
      padding: 0 20upx;
      border-left: 8upx solid #18c7e1;
    }
  }

  .card {
    margin-bottom: 20rpx;
  }

  uni-view.u-radio {
    background: #d0d0d045;
    width: 70px;
    height: 40px;
    padding: 10px;
    border-radius: 10px;
    margin: 10px;
  }

  .select {
    margin: 10px;
    text-align: left;
    border: 1px solid #dadada;
    border-radius: 10rpx;
    padding: 20rpx 20rpx 20rpx 50rpx;
  }
}

.sbtn {
  background: #18c7e1;
  color: #fff;
  width: 80%;
}
</style>
